/*
 * @Author: 东东
 * @Date: 2022-11-13 10:59:42
 * @LastEditors: your Name
 * @LastEditTime: 2023-04-27 10:55:11
 * @Description: 
 */

import React, { useRef } from 'react';
import { Button, Form, Input, Select, Space, message, Cascader, Col, Row, Table, InputNumber } from "antd";
import "./index.less";
import { Area } from "@/config/area";
import { EXP_TRIM } from "@/config/exp";
import SearchForm from "@/components/SearchForm";
import Paginations from "@/components/Paginations";

const BasicForm = () => {
	const { Option } = Select;
	const [form] = Form.useForm();
	const columns = [
		{
			title: '姓名',
			dataIndex: 'name',
			placeholder: '请输入姓名~',
			type: 'txt'
		},
		{
			title: '年龄',
			dataIndex: 'age',
			placeholder: '请输入年龄~',
			type: 'txt'
		},
		{
			title: '地址',
			dataIndex: 'address',
			placeholder: '请输入地址~',
			type: 'txt'
		},
		{
			title: '性別',
			dataIndex: 'gender',
			placeholder: '请选择性别',
			type: 'select',
			options: [{ value: "male", cont: "男" },
			{ value: "female", cont: "女" },
			{ value: "other", cont: "其他" }
			]
		}
	];
	const data = [];

	for (let i = 0; i < 10; i++) {
		data.push({
			key: i,
			name: `Edward King ${i}`,
			age: 32,
			address: `London, Park Lane no. ${i}`,
		});
	}

	const handlePages = (current, size) => {
		console.log(current, size, '分页参数');
		// setCurrent(current)
		// handleInitPage(ids, current, size);
	};

	// 子传父 搜索内容
	const handleChildValueChange = (searchValue) => {
		console.log(searchValue, '----子传父 搜索内容 父----- - - ');
	};

	// // 联动权限受控
	// const onGenderChange = (value: string) => {
	// 	switch (value) {
	// 		case "male":
	// 			form.setFieldsValue({ note: "Hi, man!" });
	// 			return;
	// 		case "female":
	// 			form.setFieldsValue({ note: "Hi, lady!" });
	// 			return;
	// 		case "other":
	// 			form.setFieldsValue({ note: "Hi there!" });
	// 	}
	// };
	// const onFinish = (values: any) => {
	// 	console.log(values.user?.replace(EXP_TRIM, ''), '去除前后空格');
	// 	message.success("搜索的数据为 : " + JSON.stringify(values));
	// 	console.log(JSON.stringify(values));
	// };
	// const onReset = () => {
	// 	form.resetFields();
	// };
	// const onFill = () => {
	// 	form.setFieldsValue({
	// 		user: "mark",
	// 		note: "Hello world!",
	// 		gender: "male",
	// 		city: 'This is AreaCity'
	// 	});
	// };
	return (
		<div className="card content-box">
			<SearchForm columns={columns} handleChildValueChange={handleChildValueChange} />
			{/* <Form form={form} name="control-hooks" onFinish={onFinish}>
				<Row justify="space-around" gutter={24} wrap >
					<Col span={4}>
						<Form.Item name="user" label="User">
							<Input placeholder="Please enter a user" />
						</Form.Item>
					</Col>
					<Col span={4}>
						<Form.Item name="note" label="Note">
							<Input placeholder="Please enter a user note" />
						</Form.Item>
					</Col>
					<Col span={4}>
						<Form.Item name="gender" label="Gender">
							<Select placeholder="Select a option and change input text above" onChange={onGenderChange} allowClear>
								<Option value="male">male</Option>
								<Option value="female">female</Option>
								<Option value="other">other</Option>
							</Select>
						</Form.Item>
					</Col>
					<Col span={4}>
						<Form.Item name="city" label="City">
							<Cascader placeholder="This is AreaCity" options={Area} />
						</Form.Item>
					</Col>
					<Col span={4}>

						<Form.Item >
							<Space>
								<Button type="primary" htmlType="submit">
									提交
								</Button>
								<Button htmlType="button" onClick={onReset}>
									重置
								</Button>
								<Button type="ghost" htmlType="button" onClick={onFill}>
									提示
								</Button>
							</Space>
						</Form.Item>
					</Col>
				</Row>
			</Form> */}
			<Table columns={columns} dataSource={data} pagination={false} />
			{/* <Paginations total={total} current={currents} handlePages={handlePages} /> */}
			<Paginations total={20} current={1} handlePages={handlePages} />
		</div>
	);
};

export default BasicForm;
